<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>规则参数收集</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 60%;
            margin: 50px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        h2 {
            text-align: center;
        }
        label {
            display: block;
            margin-bottom: 10px;
        }
        input[type="text"], input[type="number"], textarea {
            width: calc(100% - 20px);
            padding: 8px;
            margin-top: 5px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .condition-container {
            margin-bottom: 20px;
        }
        .condition-container label {
            display: inline-block;
            width: 30%;
            margin-right: 10px;
            text-align: left;
        }
        .condition-container input {
            width: calc(70% - 10px);
            margin-right: 0;
        }
        .button-container {
            text-align: right;
        }
        .button-container button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
        }
        .button-container button:hover {
            background-color: #45a049;
        }


        .add {
            display: inline-block;
            width: 48px; height: 48px;
            color: #ccc;
            border: 2px dashed;
            transition: color .25s;
            position: relative;
            overflow: hidden;
        }
        .add:hover {
            color: #34538b;
        }
        .add::before, .add::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
        }
        .add::before {
            width: 20px;
            border-top: 4px solid;
            margin: -2px 0 0 -10px;
        }
        .add::after {
            height: 20px;
            border-left: 4px solid;
            margin: -10px 0 0 -2px;
        }



    </style>
</head>
<body>

<div class="container">
    <h2>模型-1-规则发布页</h2>
    <form id="ruleForm">
        <div class="condition-container">
            <label for="rule_id">[== 规则ID ==]</label>
            <input type="text" id="rule_id" name="rule_id" required>
        </div>


        <div class="condition-container">
            <label for="static_conditions_container">[== 静态画像条件 ==]</label>
            <div id="static_conditions_container"></div>
            <button type="button" id="addStaticCondition" class="add"></button>
        </div>


        <div class="condition-container">
            <label for="dynamic_cnt_conditions_container">[== 动态计数条件 ==]</label>
            <div id="dynamic_cnt_conditions_container"></div>
            <button type="button" id="addDynamicCntCondition"  class="add"></button>
        </div>


        <div class="condition-container">
            <label for="dynamic_seq_condition">[== 动态序列条件 ==]</label>
            <div id="dynamic_seq_condition_container">
                <label>序列串：<input type="text" id="dynamic_seq_condition" name="dynamic_seq_condition" required></label><br />
                <label>运算符：<input type="text" id="sequence_operator" name="sequence_operator" required></label><br />
                <label>目标值：<input type="number" id="sequence_value" name="sequence_value" required></label>

            </div>
            <!--<button type="button" id="addDynamicSeqCondition">添加动态序列条件</button>-->
        </div>

        <div class="condition-container">
            <label for="trigger_event_id">[== 触发事件ID ==]</label>
            <input type="text" id="trigger_event_id" name="trigger_event_id" required>
        </div>

        <div class="button-container">
            <input type="submit" value="发布规则" onclick="submitFormData()">
        </div>
    </form>
</div>

<script>
    function submitFormData() {
        var jsonData = {};
        jsonData.rule_id = $("#rule_id").val();
        jsonData.static_condition = [];
        $("#static_conditions_container div").each(function() {
            var condition = {
                tag_name: $(this).find("input[name='tag_name']").val(),
                compare_type: $(this).find("input[name='compare_type']").val(),
                compare_value: $(this).find("input[name='compare_value']").val().split(',')
            };
            jsonData.static_condition.push(condition);
        });
        jsonData.dynamic_cnt_condition = [];
        $("#dynamic_cnt_conditions_container div").each(function() {
            var condition = {
                event_id: $(this).find("input[name='event_id']").val(),
                compare_type: $(this).find("input[name='compare_type']").val(),
                compare_value: parseInt($(this).find("input[name='compare_value']").val())
            };
            jsonData.dynamic_cnt_condition.push(condition);
        });
        jsonData.dynamic_seq_condition = {
            compare_type: $("#sequence_operator").val(),
            event_seq: $("#dynamic_seq_condition").val().split(','),
            compare_value: parseInt($("#sequence_value").val())
        };
        jsonData.trigger_event_id = $("#trigger_event_id").val();
        jsonData.model_id = 'model-01';

        // 发送 AJAX 请求
        $.ajax({
            url: "http://localhost:8080/abc",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify(jsonData),
            success: function(response) {
                console.log("成功发送数据到后台");
                // 可以在这里处理后台响应
            },
            error: function(xhr, status, error) {
                console.error("发送数据到后台时出错:", error);
                // 可以在这里处理错误情况
            }
        });
    }

    $(document).ready(function() {
        $("#addStaticCondition").click(function() {
            $("#static_conditions_container").append('<div><label>标签名：<input type="text" name="tag_name" required></label>' +
                '<label>运算符：<input type="text" name="compare_type" required></label>' +
                '<label>目标值：<input type="text" name="compare_value" required></label></div>');
        });

        $("#addDynamicCntCondition").click(function() {
            $("#dynamic_cnt_conditions_container").append('<div><label>事件ID：<input type="text" name="event_id" required></label>' +
                '<label>运算符：<input type="text" name="compare_type" required></label>' +
                '<label>目标值：<input type="number" name="compare_value" required></label></div>');
        });

  /*      $("#addDynamicSeqCondition").click(function() {
            $("#dynamic_seq_condition_container").append('<div><label>动态序列条件：</label>' +
                '<label>事件序列：<input type="text" name="dynamic_seq_condition" required></label>' +
                '<label>运算符：<input type="text" name="sequence_operator" required></label>' +
                '<label>目标值：<input type="number" name="sequence_operator" required></label>' +
                '</div>');
        });*/
    });
</script>

</body>
</html>
